<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont</title>
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main markdown">
  <h1>IconFont 图标</h1>
  <ul class="icon_lists clear">

    <li>
      <i class="icon iconfont icon-accessory"></i>
      <div class="name">accessory</div>
      <div class="fontclass">.icon-accessory</div>
    </li>

    <li>
      <i class="icon iconfont icon-activity"></i>
      <div class="name">activity</div>
      <div class="fontclass">.icon-activity</div>
    </li>

    <li>
      <i class="icon iconfont icon-activity_fill"></i>
      <div class="name">activity_fill</div>
      <div class="fontclass">.icon-activity_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-add"></i>
      <div class="name">add</div>
      <div class="fontclass">.icon-add</div>
    </li>

    <li>
      <i class="icon iconfont icon-addition_fill"></i>
      <div class="name">addition_fill</div>
      <div class="fontclass">.icon-addition_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-addition"></i>
      <div class="name">addition</div>
      <div class="fontclass">.icon-addition</div>
    </li>

    <li>
      <i class="icon iconfont icon-addpeople_fill"></i>
      <div class="name">addpeople_fill</div>
      <div class="fontclass">.icon-addpeople_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-addpeople"></i>
      <div class="name">addpeople</div>
      <div class="fontclass">.icon-addpeople</div>
    </li>

    <li>
      <i class="icon iconfont icon-addressbook_fill"></i>
      <div class="name">addressbook_fill</div>
      <div class="fontclass">.icon-addressbook_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-addressbook"></i>
      <div class="name">addressbook</div>
      <div class="fontclass">.icon-addressbook</div>
    </li>

    <li>
      <i class="icon iconfont icon-barrage_fill"></i>
      <div class="name">barrage_fill</div>
      <div class="fontclass">.icon-barrage_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-barrage"></i>
      <div class="name">barrage</div>
      <div class="fontclass">.icon-barrage</div>
    </li>

    <li>
      <i class="icon iconfont icon-browse_fill"></i>
      <div class="name">browse_fill</div>
      <div class="fontclass">.icon-browse_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-browse"></i>
      <div class="name">browse</div>
      <div class="fontclass">.icon-browse</div>
    </li>

    <li>
      <i class="icon iconfont icon-brush"></i>
      <div class="name">brush</div>
      <div class="fontclass">.icon-brush</div>
    </li>

    <li>
      <i class="icon iconfont icon-brush_fill"></i>
      <div class="name">brush_fill</div>
      <div class="fontclass">.icon-brush_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-businesscard_fill"></i>
      <div class="name">businesscard_fill</div>
      <div class="fontclass">.icon-businesscard_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-businesscard"></i>
      <div class="name">businesscard</div>
      <div class="fontclass">.icon-businesscard</div>
    </li>

    <li>
      <i class="icon iconfont icon-camera_fill"></i>
      <div class="name">camera_fill</div>
      <div class="fontclass">.icon-camera_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-camera"></i>
      <div class="name">camera</div>
      <div class="fontclass">.icon-camera</div>
    </li>

    <li>
      <i class="icon iconfont icon-clock_fill"></i>
      <div class="name">clock_fill</div>
      <div class="fontclass">.icon-clock_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-clock"></i>
      <div class="name">clock</div>
      <div class="fontclass">.icon-clock</div>
    </li>

    <li>
      <i class="icon iconfont icon-close"></i>
      <div class="name">close</div>
      <div class="fontclass">.icon-close</div>
    </li>

    <li>
      <i class="icon iconfont icon-collection_fill"></i>
      <div class="name">collection_fill</div>
      <div class="fontclass">.icon-collection_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-collection"></i>
      <div class="name">collection</div>
      <div class="fontclass">.icon-collection</div>
    </li>

    <li>
      <i class="icon iconfont icon-computer_fill"></i>
      <div class="name">computer_fill</div>
      <div class="fontclass">.icon-computer_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-computer"></i>
      <div class="name">computer</div>
      <div class="fontclass">.icon-computer</div>
    </li>

    <li>
      <i class="icon iconfont icon-coordinates_fill"></i>
      <div class="name">coordinates_fill</div>
      <div class="fontclass">.icon-coordinates_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-coordinates"></i>
      <div class="name">coordinates</div>
      <div class="fontclass">.icon-coordinates</div>
    </li>

    <li>
      <i class="icon iconfont icon-coupons_fill"></i>
      <div class="name">coupons_fill</div>
      <div class="fontclass">.icon-coupons_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-coupons"></i>
      <div class="name">coupons</div>
      <div class="fontclass">.icon-coupons</div>
    </li>

    <li>
      <i class="icon iconfont icon-createtask_fill"></i>
      <div class="name">createtask_fill</div>
      <div class="fontclass">.icon-createtask_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-createtask"></i>
      <div class="name">createtask</div>
      <div class="fontclass">.icon-createtask</div>
    </li>

    <li>
      <i class="icon iconfont icon-customerservice_fill"></i>
      <div class="name">customerservice_fill</div>
      <div class="fontclass">.icon-customerservice_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-customerservice"></i>
      <div class="name">customerservice</div>
      <div class="fontclass">.icon-customerservice</div>
    </li>

    <li>
      <i class="icon iconfont icon-delete_fill"></i>
      <div class="name">delete_fill</div>
      <div class="fontclass">.icon-delete_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-delete"></i>
      <div class="name">delete</div>
      <div class="fontclass">.icon-delete</div>
    </li>

    <li>
      <i class="icon iconfont icon-document"></i>
      <div class="name">document</div>
      <div class="fontclass">.icon-document</div>
    </li>

    <li>
      <i class="icon iconfont icon-document_fill"></i>
      <div class="name">document_fill</div>
      <div class="fontclass">.icon-document_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-dynamic_fill"></i>
      <div class="name">dynamic_fill</div>
      <div class="fontclass">.icon-dynamic_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-dynamic"></i>
      <div class="name">dynamic</div>
      <div class="fontclass">.icon-dynamic</div>
    </li>

    <li>
      <i class="icon iconfont icon-editor"></i>
      <div class="name">editor</div>
      <div class="fontclass">.icon-editor</div>
    </li>

    <li>
      <i class="icon iconfont icon-eit"></i>
      <div class="name">eit</div>
      <div class="fontclass">.icon-eit</div>
    </li>

    <li>
      <i class="icon iconfont icon-emoji_fill"></i>
      <div class="name">emoji_fill</div>
      <div class="fontclass">.icon-emoji_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-emoji"></i>
      <div class="name">emoji</div>
      <div class="fontclass">.icon-emoji</div>
    </li>

    <li>
      <i class="icon iconfont icon-empty"></i>
      <div class="name">empty</div>
      <div class="fontclass">.icon-empty</div>
    </li>

    <li>
      <i class="icon iconfont icon-empty_fill"></i>
      <div class="name">empty_fill</div>
      <div class="fontclass">.icon-empty_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-enter"></i>
      <div class="name">enter</div>
      <div class="fontclass">.icon-enter</div>
    </li>

    <li>
      <i class="icon iconfont icon-enterinto"></i>
      <div class="name">enterinto</div>
      <div class="fontclass">.icon-enterinto</div>
    </li>

    <li>
      <i class="icon iconfont icon-enterinto_fill"></i>
      <div class="name">enterinto_fill</div>
      <div class="fontclass">.icon-enterinto_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-feedback_fill"></i>
      <div class="name">feedback_fill</div>
      <div class="fontclass">.icon-feedback_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-feedback"></i>
      <div class="name">feedback</div>
      <div class="fontclass">.icon-feedback</div>
    </li>

    <li>
      <i class="icon iconfont icon-flag_fill"></i>
      <div class="name">flag_fill</div>
      <div class="fontclass">.icon-flag_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-flag"></i>
      <div class="name">flag</div>
      <div class="fontclass">.icon-flag</div>
    </li>

    <li>
      <i class="icon iconfont icon-flashlight"></i>
      <div class="name">flashlight</div>
      <div class="fontclass">.icon-flashlight</div>
    </li>

    <li>
      <i class="icon iconfont icon-flashlight_fill"></i>
      <div class="name">flashlight_fill</div>
      <div class="fontclass">.icon-flashlight_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-flip"></i>
      <div class="name">flip</div>
      <div class="fontclass">.icon-flip</div>
    </li>

    <li>
      <i class="icon iconfont icon-flip_fill"></i>
      <div class="name">flip_fill</div>
      <div class="fontclass">.icon-flip_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-fullscreen"></i>
      <div class="name">fullscreen</div>
      <div class="fontclass">.icon-fullscreen</div>
    </li>

    <li>
      <i class="icon iconfont icon-group"></i>
      <div class="name">group</div>
      <div class="fontclass">.icon-group</div>
    </li>

    <li>
      <i class="icon iconfont icon-group_fill"></i>
      <div class="name">group_fill</div>
      <div class="fontclass">.icon-group_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-headlines_fill"></i>
      <div class="name">headlines_fill</div>
      <div class="fontclass">.icon-headlines_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-headlines"></i>
      <div class="name">headlines</div>
      <div class="fontclass">.icon-headlines</div>
    </li>

    <li>
      <i class="icon iconfont icon-homepage_fill"></i>
      <div class="name">homepage_fill</div>
      <div class="fontclass">.icon-homepage_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-homepage"></i>
      <div class="name">homepage</div>
      <div class="fontclass">.icon-homepage</div>
    </li>

    <li>
      <i class="icon iconfont icon-integral_fill"></i>
      <div class="name">integral_fill</div>
      <div class="fontclass">.icon-integral_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-integral"></i>
      <div class="name">integral</div>
      <div class="fontclass">.icon-integral</div>
    </li>

    <li>
      <i class="icon iconfont icon-interactive_fill"></i>
      <div class="name">interactive_fill</div>
      <div class="fontclass">.icon-interactive_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-interactive"></i>
      <div class="name">interactive</div>
      <div class="fontclass">.icon-interactive</div>
    </li>

    <li>
      <i class="icon iconfont icon-keyboard"></i>
      <div class="name">keyboard</div>
      <div class="fontclass">.icon-keyboard</div>
    </li>

    <li>
      <i class="icon iconfont icon-label"></i>
      <div class="name">label</div>
      <div class="fontclass">.icon-label</div>
    </li>

    <li>
      <i class="icon iconfont icon-label_fill"></i>
      <div class="name">label_fill</div>
      <div class="fontclass">.icon-label_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-like_fill"></i>
      <div class="name">like_fill</div>
      <div class="fontclass">.icon-like_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-like"></i>
      <div class="name">like</div>
      <div class="fontclass">.icon-like</div>
    </li>

    <li>
      <i class="icon iconfont icon-live_fill"></i>
      <div class="name">live_fill</div>
      <div class="fontclass">.icon-live_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-live"></i>
      <div class="name">live</div>
      <div class="fontclass">.icon-live</div>
    </li>

    <li>
      <i class="icon iconfont icon-lock_fill"></i>
      <div class="name">lock_fill</div>
      <div class="fontclass">.icon-lock_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-lock"></i>
      <div class="name">lock</div>
      <div class="fontclass">.icon-lock</div>
    </li>

    <li>
      <i class="icon iconfont icon-mail"></i>
      <div class="name">mail</div>
      <div class="fontclass">.icon-mail</div>
    </li>

    <li>
      <i class="icon iconfont icon-mail_fill"></i>
      <div class="name">mail_fill</div>
      <div class="fontclass">.icon-mail_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-manage_fill"></i>
      <div class="name">manage_fill</div>
      <div class="fontclass">.icon-manage_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-manage"></i>
      <div class="name">manage</div>
      <div class="fontclass">.icon-manage</div>
    </li>

    <li>
      <i class="icon iconfont icon-message"></i>
      <div class="name">message</div>
      <div class="fontclass">.icon-message</div>
    </li>

    <li>
      <i class="icon iconfont icon-message_fill"></i>
      <div class="name">message_fill</div>
      <div class="fontclass">.icon-message_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-mine"></i>
      <div class="name">mine</div>
      <div class="fontclass">.icon-mine</div>
    </li>

    <li>
      <i class="icon iconfont icon-mine_fill"></i>
      <div class="name">mine_fill</div>
      <div class="fontclass">.icon-mine_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-mobilephone_fill"></i>
      <div class="name">mobilephone_fill</div>
      <div class="fontclass">.icon-mobilephone_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-mobilephone"></i>
      <div class="name">mobilephone</div>
      <div class="fontclass">.icon-mobilephone</div>
    </li>

    <li>
      <i class="icon iconfont icon-more"></i>
      <div class="name">more</div>
      <div class="fontclass">.icon-more</div>
    </li>

    <li>
      <i class="icon iconfont icon-narrow"></i>
      <div class="name">narrow</div>
      <div class="fontclass">.icon-narrow</div>
    </li>

    <li>
      <i class="icon iconfont icon-offline_fill"></i>
      <div class="name">offline_fill</div>
      <div class="fontclass">.icon-offline_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-offline"></i>
      <div class="name">offline</div>
      <div class="fontclass">.icon-offline</div>
    </li>

    <li>
      <i class="icon iconfont icon-order_fill"></i>
      <div class="name">order_fill</div>
      <div class="fontclass">.icon-order_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-order"></i>
      <div class="name">order</div>
      <div class="fontclass">.icon-order</div>
    </li>

    <li>
      <i class="icon iconfont icon-other"></i>
      <div class="name">other</div>
      <div class="fontclass">.icon-other</div>
    </li>

    <li>
      <i class="icon iconfont icon-people_fill"></i>
      <div class="name">people_fill</div>
      <div class="fontclass">.icon-people_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-people"></i>
      <div class="name">people</div>
      <div class="fontclass">.icon-people</div>
    </li>

    <li>
      <i class="icon iconfont icon-picture_fill"></i>
      <div class="name">picture_fill</div>
      <div class="fontclass">.icon-picture_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-picture"></i>
      <div class="name">picture</div>
      <div class="fontclass">.icon-picture</div>
    </li>

    <li>
      <i class="icon iconfont icon-play"></i>
      <div class="name">play</div>
      <div class="fontclass">.icon-play</div>
    </li>

    <li>
      <i class="icon iconfont icon-play_fill"></i>
      <div class="name">play_fill</div>
      <div class="fontclass">.icon-play_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-playon_fill"></i>
      <div class="name">playon_fill</div>
      <div class="fontclass">.icon-playon_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-playon"></i>
      <div class="name">playon</div>
      <div class="fontclass">.icon-playon</div>
    </li>

    <li>
      <i class="icon iconfont icon-praise_fill"></i>
      <div class="name">praise_fill</div>
      <div class="fontclass">.icon-praise_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-praise"></i>
      <div class="name">praise</div>
      <div class="fontclass">.icon-praise</div>
    </li>

    <li>
      <i class="icon iconfont icon-prompt_fill"></i>
      <div class="name">prompt_fill</div>
      <div class="fontclass">.icon-prompt_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-prompt"></i>
      <div class="name">prompt</div>
      <div class="fontclass">.icon-prompt</div>
    </li>

    <li>
      <i class="icon iconfont icon-qrcode_fill"></i>
      <div class="name">qrcode_fill</div>
      <div class="fontclass">.icon-qrcode_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-qrcode"></i>
      <div class="name">qrcode</div>
      <div class="fontclass">.icon-qrcode</div>
    </li>

    <li>
      <i class="icon iconfont icon-redpacket_fill"></i>
      <div class="name">redpacket_fill</div>
      <div class="fontclass">.icon-redpacket_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-redpacket"></i>
      <div class="name">redpacket</div>
      <div class="fontclass">.icon-redpacket</div>
    </li>

    <li>
      <i class="icon iconfont icon-refresh"></i>
      <div class="name">refresh</div>
      <div class="fontclass">.icon-refresh</div>
    </li>

    <li>
      <i class="icon iconfont icon-remind_fill"></i>
      <div class="name">remind_fill</div>
      <div class="fontclass">.icon-remind_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-remind"></i>
      <div class="name">remind</div>
      <div class="fontclass">.icon-remind</div>
    </li>

    <li>
      <i class="icon iconfont icon-return"></i>
      <div class="name">return</div>
      <div class="fontclass">.icon-return</div>
    </li>

    <li>
      <i class="icon iconfont icon-right"></i>
      <div class="name">right</div>
      <div class="fontclass">.icon-right</div>
    </li>

    <li>
      <i class="icon iconfont icon-scan"></i>
      <div class="name">scan</div>
      <div class="fontclass">.icon-scan</div>
    </li>

    <li>
      <i class="icon iconfont icon-select_fill"></i>
      <div class="name">select_fill</div>
      <div class="fontclass">.icon-select_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-select"></i>
      <div class="name">select</div>
      <div class="fontclass">.icon-select</div>
    </li>

    <li>
      <i class="icon iconfont icon-send"></i>
      <div class="name">send</div>
      <div class="fontclass">.icon-send</div>
    </li>

    <li>
      <i class="icon iconfont icon-service_fill"></i>
      <div class="name">service_fill</div>
      <div class="fontclass">.icon-service_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-service"></i>
      <div class="name">service</div>
      <div class="fontclass">.icon-service</div>
    </li>

    <li>
      <i class="icon iconfont icon-setup_fill"></i>
      <div class="name">setup_fill</div>
      <div class="fontclass">.icon-setup_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-setup"></i>
      <div class="name">setup</div>
      <div class="fontclass">.icon-setup</div>
    </li>

    <li>
      <i class="icon iconfont icon-share_fill"></i>
      <div class="name">share_fill</div>
      <div class="fontclass">.icon-share_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-share"></i>
      <div class="name">share</div>
      <div class="fontclass">.icon-share</div>
    </li>

    <li>
      <i class="icon iconfont icon-shielding_fill"></i>
      <div class="name">shielding_fill</div>
      <div class="fontclass">.icon-shielding_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-shielding"></i>
      <div class="name">shielding</div>
      <div class="fontclass">.icon-shielding</div>
    </li>

    <li>
      <i class="icon iconfont icon-smallscreen_fill"></i>
      <div class="name">smallscreen_fill</div>
      <div class="fontclass">.icon-smallscreen_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-smallscreen"></i>
      <div class="name">smallscreen</div>
      <div class="fontclass">.icon-smallscreen</div>
    </li>

    <li>
      <i class="icon iconfont icon-stealth_fill"></i>
      <div class="name">stealth_fill</div>
      <div class="fontclass">.icon-stealth_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-stealth"></i>
      <div class="name">stealth</div>
      <div class="fontclass">.icon-stealth</div>
    </li>

    <li>
      <i class="icon iconfont icon-success_fill"></i>
      <div class="name">success_fill</div>
      <div class="fontclass">.icon-success_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-success"></i>
      <div class="name">success</div>
      <div class="fontclass">.icon-success</div>
    </li>

    <li>
      <i class="icon iconfont icon-suspend"></i>
      <div class="name">suspend</div>
      <div class="fontclass">.icon-suspend</div>
    </li>

    <li>
      <i class="icon iconfont icon-switch"></i>
      <div class="name">switch</div>
      <div class="fontclass">.icon-switch</div>
    </li>

    <li>
      <i class="icon iconfont icon-systemprompt_fill"></i>
      <div class="name">systemprompt_fill</div>
      <div class="fontclass">.icon-systemprompt_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-systemprompt"></i>
      <div class="name">systemprompt</div>
      <div class="fontclass">.icon-systemprompt</div>
    </li>

    <li>
      <i class="icon iconfont icon-tailor"></i>
      <div class="name">tailor</div>
      <div class="fontclass">.icon-tailor</div>
    </li>

    <li>
      <i class="icon iconfont icon-task"></i>
      <div class="name">task</div>
      <div class="fontclass">.icon-task</div>
    </li>

    <li>
      <i class="icon iconfont icon-task_fill"></i>
      <div class="name">task_fill</div>
      <div class="fontclass">.icon-task_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-tasklist_fill"></i>
      <div class="name">tasklist_fill</div>
      <div class="fontclass">.icon-tasklist_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-tasklist"></i>
      <div class="name">tasklist</div>
      <div class="fontclass">.icon-tasklist</div>
    </li>

    <li>
      <i class="icon iconfont icon-text"></i>
      <div class="name">text</div>
      <div class="fontclass">.icon-text</div>
    </li>

    <li>
      <i class="icon iconfont icon-time_fill"></i>
      <div class="name">time_fill</div>
      <div class="fontclass">.icon-time_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-time"></i>
      <div class="name">time</div>
      <div class="fontclass">.icon-time</div>
    </li>

    <li>
      <i class="icon iconfont icon-translation_fill"></i>
      <div class="name">translation_fill</div>
      <div class="fontclass">.icon-translation_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-translation"></i>
      <div class="name">translation</div>
      <div class="fontclass">.icon-translation</div>
    </li>

    <li>
      <i class="icon iconfont icon-trash"></i>
      <div class="name">trash</div>
      <div class="fontclass">.icon-trash</div>
    </li>

    <li>
      <i class="icon iconfont icon-trash_fill"></i>
      <div class="name">trash_fill</div>
      <div class="fontclass">.icon-trash_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-undo"></i>
      <div class="name">undo</div>
      <div class="fontclass">.icon-undo</div>
    </li>

    <li>
      <i class="icon iconfont icon-unlock_fill"></i>
      <div class="name">unlock_fill</div>
      <div class="fontclass">.icon-unlock_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-unlock"></i>
      <div class="name">unlock</div>
      <div class="fontclass">.icon-unlock</div>
    </li>

    <li>
      <i class="icon iconfont icon-video"></i>
      <div class="name">video</div>
      <div class="fontclass">.icon-video</div>
    </li>

    <li>
      <i class="icon iconfont icon-video_fill"></i>
      <div class="name">video_fill</div>
      <div class="fontclass">.icon-video_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-warning_fill"></i>
      <div class="name">warning_fill</div>
      <div class="fontclass">.icon-warning_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-warning"></i>
      <div class="name">warning</div>
      <div class="fontclass">.icon-warning</div>
    </li>

    <li>
      <i class="icon iconfont icon-workbench_fill"></i>
      <div class="name">workbench_fill</div>
      <div class="fontclass">.icon-workbench_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-workbench"></i>
      <div class="name">workbench</div>
      <div class="fontclass">.icon-workbench</div>
    </li>

    <li>
      <i class="icon iconfont icon-search"></i>
      <div class="name">search</div>
      <div class="fontclass">.icon-search</div>
    </li>

    <li>
      <i class="icon iconfont icon-searchfill"></i>
      <div class="name">search fill</div>
      <div class="fontclass">.icon-searchfill</div>
    </li>

    <li>
      <i class="icon iconfont icon-qianniu"></i>
      <div class="name">qianriu_fill</div>
      <div class="fontclass">.icon-qianniu</div>
    </li>

    <li>
      <i class="icon iconfont icon-publishgoods_fill"></i>
      <div class="name">publish goods_fill</div>
      <div class="fontclass">.icon-publishgoods_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-shop_fill"></i>
      <div class="name">shop_fill</div>
      <div class="fontclass">.icon-shop_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-transaction_fill"></i>
      <div class="name">transaction_fill</div>
      <div class="fontclass">.icon-transaction_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-packup"></i>
      <div class="name">packup</div>
      <div class="fontclass">.icon-packup</div>
    </li>

    <li>
      <i class="icon iconfont icon-unfold"></i>
      <div class="name">unfold</div>
      <div class="fontclass">.icon-unfold</div>
    </li>

    <li>
      <i class="icon iconfont icon-wangwang"></i>
      <div class="name">wangwang_fill</div>
      <div class="fontclass">.icon-wangwang</div>
    </li>

    <li>
      <i class="icon iconfont icon-financial_fill"></i>
      <div class="name">financial_fill</div>
      <div class="fontclass">.icon-financial_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-marketing_fill"></i>
      <div class="name">marketing_fill</div>
      <div class="fontclass">.icon-marketing_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-shake"></i>
      <div class="name">shake</div>
      <div class="fontclass">.icon-shake</div>
    </li>

    <li>
      <i class="icon iconfont icon-decoration_fill"></i>
      <div class="name">decoration_fill</div>
      <div class="fontclass">.icon-decoration_fill</div>
    </li>

    <li>
      <i class="icon iconfont icon-budaidise"></i>
      <div class="name">logo</div>
      <div class="fontclass">.icon-budaidise</div>
    </li>

    <li>
      <i class="icon iconfont icon-qianniudaidise"></i>
      <div class="name">logo_fill</div>
      <div class="fontclass">.icon-qianniudaidise</div>
    </li>

    <li>
      <i class="icon iconfont icon-questions"></i>
      <div class="name">questions</div>
      <div class="fontclass">.icon-questions</div>
    </li>

    <li>
      <i class="icon iconfont icon-supply"></i>
      <div class="name">supply</div>
      <div class="fontclass">.icon-supply</div>
    </li>

    <li>
      <i class="icon iconfont icon-tools"></i>
      <div class="name">tools</div>
      <div class="fontclass">.icon-tools</div>
    </li>

    <li>
      <i class="icon iconfont icon-int"></i>
      <div class="name">int_fill</div>
      <div class="fontclass">.icon-int</div>
    </li>

    <li>
      <i class="icon iconfont icon-commodity"></i>
      <div class="name">commodity</div>
      <div class="fontclass">.icon-commodity</div>
    </li>

    <li>
      <i class="icon iconfont icon-oppose_fill_light"></i>
      <div class="name">oppose_fill_light</div>
      <div class="fontclass">.icon-oppose_fill_light</div>
    </li>

    <li>
      <i class="icon iconfont icon-oppose_light"></i>
      <div class="name">oppose_light</div>
      <div class="fontclass">.icon-oppose_light</div>
    </li>

    <li>
      <i class="icon iconfont icon-zhtn"></i>
      <div class="name">energy</div>
      <div class="fontclass">.icon-zhtn</div>
    </li>

  </ul>

  <h2 id="font-class-">font-class引用</h2>
  <hr>

  <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
  <p>与unicode使用方式相比，具有如下特点：</p>
  <ul>
    <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
    <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
    <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
    <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
  </ul>
  <p>使用步骤如下：</p>
  <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


  <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
  <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
  <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span
      class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span
      class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span
      class="hljs-selector-tag">i</span>&gt;</code></pre>
  <blockquote>
    <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
  </blockquote>
</div>
</body>
</html>
